<template>
  <div>
      <div class="conten">
          <div class="title">
          <i class="iconfont icon-feiji1"></i> <span>房产列表</span>
      </div>
      <div v-for="item in agents"  :key="item.id" class="cell" @click="detail(item.id)">
          <div class="image"><img :src="item.image" alt=""></div>
          <div class="cell_info">
              <h2>{{item.name}}</h2>
              <p>{{item.desc}}</p>
          </div>
      </div>
      </div>
  </div>
</template>

<script>
import {getAgents} from '@/api/agents'
export default {
    data(){
        return{
            agents:[]
        }
    },
   async created(){
     const {data} =  await getAgents()
     console.log(data);
     this.agents = data
    },
    methods:{
        detail(id){
            this.$router.push({path:'/detail1',query:{id}})
        }
    }
}
</script>

<style  scoped>
@import url("https://at.alicdn.com/t/font_2904905_z3gg3pnwtwo.css");
.conten{
    width: 60%;
    margin: 20px auto;
}
.conten .title{
    color: #eeaf46;
}
.conten .cell {
    display: flex;
    margin-top: 15px;
    
    padding: 10px 20px;
    /* background-color: yellow; */
    border: 1px solid #eee;
    border-radius: 10px;
}
.conten .cell:hover{
    transform: translateY(-5px);
    transition: all 0.6s;
 box-shadow: darkgrey 2px 3px 7px 2px;
}
.conten .cell .image img{
    width: 120px;
    height: 120px;
    margin-right: 10px;
}

</style>
